<template>
	<view class="message-all">
		<header>
			<view class="message-top-bar">
				<view class="blank-box"></view>
				<view class="message">消息</view>
				<view class="Discovery-group-chat" @click="toggleSubMenu">
					<view class="chat">
						<image src="../../static/MessageImg/guanyu.png" mode="" class="chat-image"></image>
						<text>发现群聊</text>
					</view>
					<view v-show="showSubMenu" class="sub-menu" >
						<view class="Create-a-group-chat" @click="CreateGroupChat">
							<image src="../../static/MessageImg/jiaohao.png" mode="" @click="CreateGroupChat" class="sub-menu-image"></image>
							创建群聊</view>
						<view class="Group-chat-square">
							<image src="../../static/MessageImg/guanyu.png" mode="" class="chat-square-image"></image>
							群聊广场</view>
					</view>
				</view>
			</view>
		</header>
		<nav>
			<view class="navigation-bar">
				<view class="navigation-center-one" @click="likes">
					<view class="Likes-and-favorites">
						<image :src="likesimage" mode="" class="likes-image"></image>
					</view>
					<view class="Likes-and-favorites-title">
						赞和收藏
					</view>
				</view>
				<view class="navigation-center-two" @click="attention">
					<view class="New-attention">
						<image :src="attentionsimage" mode="" class="attentions-images"></image>
					</view>
					<view class="New-attention-title">
						新增关注
					</view>
				</view>
				<view class="navigation-center-three" @click="comments">
					<view class="Comments-and">
						<image :src="commentsimage" mode="" class="comments-image"></image>
					</view>
					<view class="Comments-and-title">
						评论和@
					</view>
				</view>
			</view>
		</nav>
		<article>
			<view class="message-notification" @click="notification">
			<view class="message-notification">
				<view class="message-notification-image-box">
					<image src="../../static/MessageImg/SystemNotifications.png" class="message-notification-image"></image>
				</view>
				<view class="message-notification-Title-box">
					<view class="message-notification-Title">
						<text class="message-notification-Title-name">消息通知</text>
						<text class="message-notification-Title-data">{{ messageData }}</text>
					</view>
					<view class="message-notification-content">
						{{messageContent}}
					</view>
				</view>
			</view>
			</view>
			<view v-for="(item,index) in cozes" :key="index" class="coze">
				<image :src="item.images" mode="" class="coze-image"></image>
				<view class="coze-user-Title-box">
					<view class="user-Title">
						<text class="user-Title-name">{{item.username}}</text>
						<text class="user-Title-data">{{item.titledata}}</text>
					</view>
					<view class="message-content">
						{{item.mcontent}}
					</view>
				</view>
			</view>
		</article>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showSubMenu: false,
				messageData:"05-20",
				messageContent:"活动通知:悟了！哇哇哇哇哇哇哇哇哇哇哇哇",
				cozes: [{
					images: require("../../static/MessageImg/taikongren.png"),
					username: "小红书创作助手",
					titledata: "05-21",
					mcontent: "你的桃花运怎么样？"
				}
				],
				likesimage: require("../../static/MessageImg/yishochang.png"),
				attentionsimage: require("../../static/MessageImg/renxiang.png"),
				commentsimage: require("../../static/MessageImg/xiaoxi.png")
			}
		},
		methods: {
			toggleSubMenu() {
				this.showSubMenu = !this.showSubMenu;
			},
			likes() {
				uni.navigateTo({
					url: "/pages/message/likes"
				})
			},
			attention() {
				uni.navigateTo({
					url: "/pages/message/attention"
				})
			},
			comments() {
				uni.navigateTo({
					url: "/pages/message/comments"
				})
			},
			CreateGroupChat(){
				uni.navigateTo({
					url:"/pages/message/CreateAGroupChat"
				})
			
			},
			notification(){
				uni.navigateTo({
					url:"/pages/message/messageNotification/messageNotification"
				})
			}
		}
	}
</script>

<style scoped>
.message-top-bar {
		height: 80rpx;
		width: 100%;
		/* 	background-color: aqua; */
		display: flex;
		justify-content: space-around;
		/* margin-top: 40rpx; */
	}

	.blank-box,
	.message,
	.Discovery-group-chat {
		width: 200rpx;
		height: 80rpx;
		/* background-color: antiquewhite; */
		text-align: center;
		line-height: 80rpx;
	}
	.chat{
		display: flex;
		justify-content: space-evenly;
		align-items: center;
	}
	.chat-image {
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
	}
   
	.Discovery-group-chat {
		display: flex;
		flex-direction: column;
	}
    .chat-square-image{
		width: 40rpx;
		height: 40rpx;
		margin-right: 20rpx;
	}
	.sub-menu {
			width: 300rpx;
			height: 200rpx;
			background-color: antiquewhite;
			margin-left: -100rpx;
			flex-shrink: 0;
			border-radius: 30rpx;
			line-height: 100rpx;
			position: relative;
			z-index: 2222;
	
		}
	.sub-menu-image{
			width: 40rpx;
			height: 40rpx;
			margin-right: 20rpx;
		}
		.Create-a-group-chat,.Group-chat-square {
	      display: flex;
		  align-items: center;
		  justify-content: center;
			border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
		}
	
		.navigation-bar {
			width: 100%;
			height: 200rpx;
			/* 		background-color: red; */
			display: flex;
			justify-content: space-around;
			margin-bottom: 20rpx;
		}
	
		.navigation-center-one,
		.navigation-center-two,
		.navigation-center-three {
			width: 30%;
			height: 200rpx;
			/* 	background-color: aqua; */
	
		}
	
		.navigation-bar>.navigation-center-one>.Likes-and-favorites {
			width: 100rpx;
			height: 100rpx;
			background-color: rgb(255, 237, 235);
			margin: auto;
			text-align: center;
			line-height: 130rpx;
			border-radius: 30rpx;
			margin-top: 30rpx;
		}
	
		.navigation-bar>.navigation-center-one>.Likes-and-favorites>.likes-image {
			width: 50rpx;
			height: 50rpx;
	
		}
	
		.Likes-and-favorites-title,
		.New-attention-title,
		.Comments-and-title {
			text-align: center;
			margin-top: 20rpx;
		}
	
		.navigation-bar>.navigation-center-two>.New-attention {
			width: 100rpx;
			height: 100rpx;
			background-color: rgb(232, 239, 254);
			margin: auto;
			text-align: center;
			line-height: 130rpx;
			border-radius: 30rpx;
			margin-top: 30rpx;
		}
	
		.navigation-bar>.navigation-center-two>.New-attention>.attentions-images {
			width: 50rpx;
			height: 50rpx;
		}
	
		.navigation-bar>.navigation-center-three>.Comments-and {
			width: 100rpx;
			height: 100rpx;
			background-color: rgb(231, 251, 242);
			margin: auto;
			text-align: center;
			line-height: 130rpx;
			border-radius: 30rpx;
			margin-top: 30rpx;
		}
	
		.navigation-bar>.navigation-center-three>.Comments-and>.comments-image {
			width: 50rpx;
			height: 50rpx;
		}
	   .message-notification,
		.coze {
			width: 100%;
			height: 150rpx;
			 /* background-color: aqua; */
			display: flex;
			align-items: center;
		}
		.message-notification-image-box{
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			border: 1rpx solid rgba(0, 0, 0, 0.1);
			margin-left:  30rpx;
			background-color: blue;
		}
		.message-notification-image{
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
			object-fit: cover;
			object-position: center;
			margin-top: 30rpx;
			margin-left: 30rpx;
		}
		.coze-image {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			object-fit: cover;
			object-position: center;
			border: 1rpx solid rgba(0, 0, 0, 0.1);
	       margin-left:  30rpx;
		}
		
		.coze-user-Title-box,
		.message-notification-Title-box{
			width: 80%;
			height: 150rpx;
			/* background-color: blueviolet; */
			margin-left: 20rpx;
		}
		
		.user-Title,
		.message-notification-Title{
			width: 95%;
			height: 75rpx;
			/* 	background-color: deeppink; */
			display: flex;
			justify-content: space-between;
		}
		
		.user-Title-name,
		.message-notification-Title-name{
			line-height: 75rpx;
		
		}
		
		.user-Title-data,
		.message-notification-Title-data{
			line-height: 75rpx;
			color: rgba(0, 0, 0, 0.6);
		}
		
		.message-content,
		.message-notification-content{
			width: 570rpx;
			height: 75rpx;
			/* background-color: aliceblue; */
			color: rgba(0, 0, 0, 0.7);
			overflow: hidden; /* 确保超出容器的文本被隐藏 */
			white-space: nowrap; /* 确保文本在一行内显示 */
			text-overflow: ellipsis; /* 使用省略号显示超出部分的文本 */
		}
</style>
